<template>
  <div class="boox">
    <div class="top">
      <p class="title">总KPI分析图</p>
      <p class="bg"></p>
    </div>
    <div class="middle" ref="middle"></div>
  </div>
</template>

<script lang="ts" setup name="RightBottom">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let middle = ref()
onMounted(() => {
  let myCharts = echarts.init(middle.value)
  myCharts.setOption({
    radar: {
      indicator: [
        { name: '销售', min: 0, max: 6500, color: 'green' },
        { name: '宣传', min: 0, max: 16000, color: 'orange' },
        { name: '浏览量', min: 0, max: 30000, color: 'yellow' },
        { name: '订单量', min: 0, max: 38000, color: 'rgb(0,255,255)' },
        { name: '营业额', min: 0, max: 52000, color: 'rgb(0,85,255)' },
        { name: '退款订单', min: 0, max: 25000, color: 'purple' },
      ],
      splitNumber: 5,
      axisName: {
        color: 'white',
        fontSize: 15,
      },
      spiltArea: {
        show: true,
        areaStyle: {
          color: ['red', 'blue', 'pink', 'yellow', 'green'],
        },
      },
    },
    tooltip: {
      show: true,
      type: 'axis',
    },
    series: [
      {
        type: 'radar',
        data: [
          { name: '一季度', value: [2000, 10000, 3000, 20000, 40000, 10000] },
          { name: '二季度', value: [2080, 16500, 3200, 200, 48000, 13000] },
          { name: '三季度', value: [3520, 1000, 300, 20300, 48000, 12000] },
          { name: '四季度', value: [2010, 10000, 3000, 20000, 40000, 10000] },
        ],
        symbol: 'triangle',
      },
    ],
  })
})
</script>
<style scoped lang="scss">
.boox {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  padding: 5px 0;
  flex: 18;
  .top {
    flex: 3;
    p {
      height: 50%;
      font-size: 20px;
    }
    .bg {
      background: url('../../images/dataScreen-title.png') no-repeat left center;
    }
  }
  .middle {
    flex: 14;
  }
}
</style>
